<template>
  <template v-if="$cfg.function.ckqx('idc') == true">
    <template v-if="data.error_alert">
      <n-alert :show-icon="false" type="error">{{ data.error_alert_text }}</n-alert>
      <br />
    </template>

    <n-card class="cardbg" content-style="padding:0.75rem;">
      <n-h3 class="h3title1">（一级菜单）目录分类：</n-h3>
      <n-space align="center">
        <n-button
          @click="data.xtype = null"
          :type="data.xtype == null ? 'warning' : 'default'"
          >○ 选择目录</n-button
        >
        <n-button
          @click="data.xtype = 'new'"
          :type="data.xtype == 'new' ? 'warning' : 'default'"
          >○ 创建目录</n-button
        >
      </n-space>
      <n-hr />
      <!-- 攻略目录 -->
      <div v-if="data.xtype == null">
        <n-select
          :status="data.sts.dir"
          :options="data.list"
          :placeholder="data.loading_text"
          v-model:value="data.data.dir"
        />
      </div>
      <div v-if="data.xtype == 'new'">
        <n-input
          :status="data.sts.dir"
          placeholder="输入要创建的分类目录名称"
          v-model:value="data.data.dir"
        ></n-input>
      </div>

      <!-- 攻略名称 -->
      <n-h3 class="h3title1">（二级菜单）攻略名称：</n-h3>
      <n-input
        :status="data.sts.name"
        placeholder="输入攻略名称"
        v-model:value="data.data.name"
      ></n-input>
      <n-hr />

      <!-- 攻略作者 -->
      <n-h3 class="h3title1">作者名称：</n-h3>
      <n-input
        :status="data.sts.by"
        placeholder="输入作者名称"
        v-model:value="data.data.by"
      ></n-input>
      <n-hr />

      <!-- 上传图片 -->
      <n-h3 class="h3title1">上传图片：</n-h3>
      <n-upload
        ref="upload"
        :action="`${$cfg.url}?t=v2/introduction/gtidc&type=img&type2=upload&authkey=${$cfg?.user?.authkey}`"
        accept="image/png, image/jpeg, image/webp"
        :default-upload="false"
        list-type="image-card"
        :data="data.data"
        @before-upload="data.upd"
        @finish="data.fin"
        :max="1"
      >
        点击上传
      </n-upload>
      <br /><n-hr />
      <n-button type="warning" style="margin-bottom: 12px" @click="data.handleClick">
        上传图片 / 提交攻略
      </n-button>
    </n-card>
  </template>
  <template v-else>
    <n-card class="cardbg" content-style="padding:0.75rem;">
        没有权限上传，请使用相关用户组账号。
      <n-hr />{{ $cfg.function.qxlang("idc") }}
    </n-card>
  </template>
</template>

<script>
import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
import { cfg } from "@/cfg/cfg.js";

export default {
  components: {
    ArchiveIcon,
  },
  props: {
    val: {
      required: true,
    },
    ct: {
      required: true,
    },
  },
  setup(props) {
    let { val, ct } = props;
    const uploadRef = ref(null);
    val.updata = {
      list: [], //攻略目录
      data: {}, //表单
      sts: {}, //status
      file: {},
      loading_text: "加载中...",
    };
    let data = val["updata"];

    //提示框文本
    data.error_alert = false;
    data.error_alert_text = "";

    //提交表单按钮
    data.handleClick = () => {
      uploadRef.value?.submit();
    };
    //函数上传前检查
    data.upd = async (file) => {
      data.error_alert = false;
      data.sts = {};
      if (data.data.dir == null || data.data.dir?.length < 1) {
        cfg.msg.error("请填写或选择攻略目录");
        data.error_alert_text = "请填写或选择攻略目录";
        data.error_alert = true;
        data.sts.dir = "error";
        return false;
      }
      if (data.data.name == null || data.data.name?.length < 1) {
        cfg.msg.error("请填写攻略名称");
        data.error_alert_text = "请填写攻略名称";
        data.error_alert = true;
        data.sts.name = "error";
        return false;
      }
      if (data.data.by == null || data.data.by?.length < 1) {
        cfg.msg.error("请填写作者名称");
        data.error_alert_text = "请填写作者名称";
        data.error_alert = true;
        data.sts.by = "error";
        return false;
      }
      if (
        file.file.file?.type === "image/png" ||
        file.file.file?.type === "image/jpeg" ||
        file.file.file?.type === "image/webp"
      ) {
        console.log(file);
        return true;
      } else {
        cfg.msg.error("只能上传jpg,web,png格式的图片文件，请重新上传");
        return false;
      }
    };
    //函数检查上传完毕
    data.fin = ({ file, event }) => {
      try {
        const back = event.target;
        const json = JSON.parse(back.responseText);
        if (json.code == 0) {
          data.data.name = "";
          cfg.msg.success(json.msg);
          uploadRef.value?.clear();
        } else {
          data.data.name = "";
          cfg.msg.error(json.msg);
        }
        return file;
      } catch (error) {
        alert(error);
        return false;
      }
    };

    onMounted(async () => {
      const axdata = await ct.get_img_idc();
      data.list = [];
      axdata?.data?.forEach((item) => {
        data.list.push({
          value: item,
          label: item,
        });
      });
      data.loading_text = "(点击这里)选择攻略目录";
    });

    return {
      upload: uploadRef,
      val,
      ct,
      data,
    };
  },
};
</script>
